import React from 'react';
import { Space, Card, Button, Radio, Slider } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import '../../../styles/tutorial.css';

// Space 间距组件教程
const SpaceTutorial = () => {
  return (
    <div className="tutorial-container">
      <h1>Space 间距组件</h1>

      {/* 1. 基本用法 */}
      <section className="example-section">
        <h2>1. 基本用法</h2>
        <div className="section-description">
          Space 组件可以自动为子元素之间设置间距，避免手动计算 margin
        </div>
        <Space>
          <Button type="primary">按钮 1</Button>
          <Button>按钮 2</Button>
          <Button type="dashed">按钮 3</Button>
          <Button type="link">按钮 4</Button>
        </Space>
      </section>

      {/* 2. 垂直间距 */}
      <section className="example-section">
        <h2>2. 垂直间距</h2>
        <div className="section-description">
          可以设置 direction="vertical" 使子元素垂直排列
        </div>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Card title="卡片 1">卡片内容</Card>
          <Card title="卡片 2">卡片内容</Card>
          <Card title="卡片 3">卡片内容</Card>
        </Space>
      </section>

      {/* 3. 间距大小 */}
      <section className="example-section">
        <h2>3. 间距大小</h2>
        <div className="section-description">
          内置 small(8px)、middle(16px)、large(24px) 三种大小，也可以自定义
        </div>
        <Space direction="vertical">
          <Space size="small">
            <Button type="primary">小间距</Button>
            <Button type="primary">小间距</Button>
          </Space>
          <Space size="middle">
            <Button type="primary">中等间距</Button>
            <Button type="primary">中等间距</Button>
          </Space>
          <Space size="large">
            <Button type="primary">大间距</Button>
            <Button type="primary">大间距</Button>
          </Space>
          <Space size={50}>
            {/* 自定义间距大小（像素值） */}
            <Button type="primary">自定义间距</Button>
            <Button type="primary">自定义间距</Button>
          </Space>
        </Space>
      </section>

      {/* 4. 对齐方式 */}
      <section className="example-section">
        <h2>4. 对齐方式</h2>
        <div className="section-description">
          可以设置 align 属性控制对齐方式：start、end、center、baseline
        </div>
        <Space direction="vertical">
          <Space align="center">
            <Button type="primary">居中对齐</Button>
            <Card style={{ height: 80 }}>较高的卡片</Card>
            <Button type="primary">居中对齐</Button>
          </Space>
          <Space align="start">
            <Button type="primary">顶部对齐</Button>
            <Card style={{ height: 80 }}>较高的卡片</Card>
            <Button type="primary">顶部对齐</Button>
          </Space>
        </Space>
      </section>

      {/* 5. 自动换行 */}
      <section className="example-section">
        <h2>5. 自动换行</h2>
        <div className="section-description">
          设置 wrap 属性可以让元素在空间不足时自动换行
        </div>
        <Space wrap>
          {Array.from({ length: 20 }, (_, index) => (
            <Button key={index}>按钮 {index + 1}</Button>
          ))}
        </Space>
      </section>
    </div>
  );
};

export default SpaceTutorial; 